<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day3</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        let app = {
            template:`
                <div>
                        <input v-model="inputValue">
                        <input v-model="obj.b.c">
                </div>
            `,
            data(){
                return {
                    inputValue:'',
                    obj:{
                        a:'aaa',
                        b:{
                            c:'ccc',
                            d:333
                        }
                    }
                }
            },
            watch: {
                'obj.b.c': function(newValue, oldValue){
                    console.log('5',newValue);
                    console.log('6',oldValue);
                },
                // obj:{
                //     handler(newValue, oldValue){
                //         console.log('3',newValue)
                //         console.log('4',oldValue)
                //     },
                //     deep:true,//深度监听
                //     // immediate:true,是否初次监听
                // },
                inputValue: function(newValue, oldValue){
                    console.log('1',newValue)
                    console.log('2',oldValue)
                },
            },
            methods:{
            }
        }
        new Vue({
            render:function(h){
                return h(app)
            }
        }).$mount('#app')
    </script>
</body>
</html>